@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .smooth-transition {
        transition: all 0.3s ease-in-out;
    }

    .card-shadow {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    }

    .card-shadow-hover {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    }

    .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .form-input-focus {
        @apply focus:ring-2 focus:ring-primary/30 focus:border-primary;
    }

    .nav-active {
        @apply text-primary border-t-2 border-primary pt-2;
    }

    .nav-inactive {
        @apply text-gray-500 hover:text-gray-700 pt-3;
    }

    .fab-btn {
        @apply fixed bottom-20 right-1/2 transform -translate-x-1/2 w-14 h-14 rounded-full bg-primary text-white shadow-lg flex items-center justify-center z-40 hover:bg-primary/90 smooth-transition;
    }

    .nav-publish {
        @apply fixed bottom-0 left-1/2 transform -translate-x-1/2 w-16 h-16 rounded-full bg-primary text-white shadow-lg flex items-center justify-center z-40 hover:bg-primary/90 smooth-transition;
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .clickable-card {
        @apply cursor-pointer hover:card-shadow-hover smooth-transition;
    }

    .content-wrapper {
        @apply pb-16;
    }

    /* 拖放区域样式 */
    .drop-area {
        @apply border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary smooth-transition cursor-pointer;
    }

    .drop-area.dragover {
        @apply border-primary bg-primary/5;
    }

    /* 登录表单样式 */
    .form-field {
        margin-bottom: 1.5rem;
    }

    .error-message {
        @apply text-danger text-sm mt-1;
        display: block;
        min-height: 1.25rem;
    }

    .shake {
        animation: shake 0.5s;
    }

    @keyframes shake {

        0%,
        100% {
            transform: translateX(0);
        }

        20%,
        60% {
            transform: translateX(-5px);
        }

        40%,
        80% {
            transform: translateX(5px);
        }
    }

    .loading-spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 1s linear infinite;
        margin-right: 0.5rem;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
}